<template>
  <div>
    <div class="a-header">
        <div class="box">
            <img src="./img/brand@2x.png" alt="" class="show" />
            <div>
                <div>
                    <img src="./img/brand@2x.png" alt="" />
                    <span>粥品香坊（大运村）</span>
                </div>
                <span>蜂鸟专送/立即送达</span>
                <div>
                    <img src="./img/decrease_1@2x.png" alt="" />
                    <span>在线支付满28减5，满50减10</span>
                </div>
                <div @click="openNotice">
                    <span style="margin-right: 4px;"> 5个 </span>
                    <span> > </span>
                </div>
            </div>
        </div> 
        <div class="notice" @click='openNotice'>
          <img src="./img/bulletin@2x.png" alt="">
          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore quos animi fugit, error fuga!</span>
          <strong> > </strong>        
    </div>
    
    </div>
    <div class="nav">
        <router-link to="/Goods">商品</router-link>
        <router-link to="/Evaluation">评价</router-link>
        <router-link to="/Merchants">商家</router-link>
        <router-view></router-view>
    </div>
    
  </div>
</template>
<script>
export default {
  name: "Header",
  components: {},
  methods: {
      openNotice(){
          this.$emit("openNotice")
      },
  }
};
</script>
<style lang="less" scoped>
.a-header {
    display:inline-block;
    width:100%;

    background-color: rgba(7, 17, 27, 0.5);
    .box{
        margin:48px 0 36px 48px;
      display:flex;
      .show{
          width: 128px;
          height: 128px;
          border-radius: 4px;
          margin-right: 32px;
      }
        div{
            position: relative;
          &:nth-child(1){
              margin-top:4px;
              margin-bottom:16px;
              img {
                  width: 60px;
                  height:36px;
                  margin-right: 12px;
                  vertical-align:middle;
              }
              span{
                font-size:32px;
                color:rgb(255,255,255);
                font-weight: bold;
                line-height: 36px;
                vertical-align:middle;
              }
          }
          &:nth-child(2){
                font-size:24px;
                color:rgb(255,255,255);
                font-weight: 200;
                line-height: 24px;
          }
          &:nth-child(3){
              margin-top: 20px;
              margin-bottom: 4px;
              img {
                  width:24px;
                  height:24px;
                  margin-right: 8px;
                  vertical-align:middle;
              }
              span {
                font-size:20px;
                color:rgb(255,255,255);
                font-weight: 200;
                line-height: 24px;
                vertical-align:middle;
              }        
          }
          &:nth-child(4){
              position:absolute;
              right: -146px;
              bottom: -5px;
              border-radius: 32px;
              width:88px;
              height:48px;
              text-align:center;
              background-color: rgba(0,0,0,0.2);
              span{
                  display: inline-block;
                  margin:14px 0;
                  font-size:20px;
                  color:rgba(255,255,255);
                  font-weight:200;
              }
          }
      }
  }
  .notice{
    background-color: rgba(7, 17, 27, 0.2);
    padding: 0 24px;
    height:56px;
    
        img {
            width:44px;
            height:24px;
            margin-right: 8px;
            vertical-align:middle;
        }
        span {
            font-size: 20px;
            color:rgb(255,255,255);
            font-weight: 200;
            white-space: nowrap;  
            display: inline-block;
            width: 85%;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 56px;  
            vertical-align:middle;  
        }
        strong {
            display: inline-block;
            vertical-align:middle;
            color:white;
            margin-left: 8px;
        }
    }
    
}
.nav{
    box-sizing: border-box;
    height:80px;
    width:100%;  
    border-bottom:2px solid rgba(7,17,27,0.1);
    a {
        display:inline-block;
        height:100%;
        width:(100% / 3);
        font-size:28px;
        line-height:80px;
        text-align:center;
    }
    .router-link-exact-active{
      color: rgb(240,20,20);
    }
}

</style>